<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>循环结构</title>
</head>

<body>

  <div class="app">
    <h2>水果种类</h2>
    <div>
      <p v-for='(item,index) in arr' :key='index'>{{index+1}}--{{item}}</p>
    </div>

    <h3>学生信息</h3>
    <p v-for='(item,index) in newArr' :key='item.id'>
      <span>{{item.id}}</span>
      <span>{{item.name}}</span>
      <span>{{item.age}}</span>
    </p>

  </div>

  <script src="../js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '.app',
      data: {
        arr: ['apple', 'orange', 'banana', 'watermelon'],
        newArr: [
          { id: 1, name: 'zhangsan', age: 12 },
          { id: 2, name: 'lisi', age: 16 },
          { id: 3, name: 'wagnwu', age: 18 },
        ]
      },
      methods: {

      }
    })
  </script>
</body>

</html>